<%--
  Created by IntelliJ IDEA.
  User: Shirly
  Date: 2016/11/30
  Time: 16:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>easyuigirdview</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/datagirdview/datagrid-detailview.js"></script>
</head>
<body>
  <table id="tt"></table>
  <script>
      $('#tt').datagrid({
          title:'DataGrid - DetailView',
          width:600,
          height:250,
          remoteSort:false,
          singleSelect:true,
          nowrap:false,
          fitColumns:true,
          url:'http://localhost:8081/spring/result',
          columns:[[
              {field:'itemid',title:'Item ID',width:80},
              {field:'productid',title:'Product ID',width:100,sortable:true},
              {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
              {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
              {field:'attr1',title:'Attribute',width:150,sortable:true},
              {field:'status',title:'Status',width:60,align:'center'}
          ]],
          view: detailview,
          detailFormatter: function(rowIndex, rowData){
              return '<table><tr>' +
                      '<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
                      '<td style="border:0">' +
                      '<p>Attribute: ' + rowData.attr1 + '</p>' +
                      '<p>Status: ' + rowData.status + '</p>' +
                      '</td>' +
                      '</tr></table>';
          }
      });

  </script>
</body>
</html>
